<template>
  <div class="detail">
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      :fixed="true"
      left-arrow
      @click-left="back"
    ></van-nav-bar>
    <div class="content">
      <img :src="commodityDetail.large_img" alt="" />
      <div class="info">
        <div class="name">{{ commodityDetail.name }}</div>
        <div class="enname">{{ commodityDetail.enname }}</div>
        <div class="collection" @click="modifyState">
          <van-icon
            :name="collection ? collectionIcon.acitveIcon : collectionIcon.Icon"
            :color="collection ? 'red' : '#000'"
            size="25px"
          />
          <p class="c-text">{{ collection ? "已收藏" : "收藏" }}</p>
        </div>
        <div
          class="practice"
          v-for="(e1, i1) in commodityDetail.resData"
          :key="i1"
        >
          <div class="p-title">{{ e1.title }}：</div>

          <div
            class="p-item"
            v-for="(e2, i2) in e1.subSp"
            :class="{ active: i2 == e1.activeIndex }"
            :key="i2"
            @click="choice(e1, i2)"
          >
            {{ e2.title }}
          </div>
        </div>
        <div class="desc">
          <div class="d-title">商品描述：</div>
          <div
            class="d-text"
            v-for="(e3, i3) in commodityDetail.desc"
            :key="i3"
          >
            {{ e3 }}
          </div>
        </div>
      </div>
    </div>
    <div class="goods-action">
      <div class="ga-top">
        <div class="ga-top-left">
          <p class="price">&yen;{{ commodityDetail.price }}</p>
          <div class="explain">
            <span
              >{{ commodityDetail.name
              }}<span v-for="(item, index) in explain" :key="index"
                >，{{ item}}</span
              ></span
            >
          </div>
        </div>
        <div class="ga-top-right">
          <div class="reduce" @click="reduce">
            <van-icon name="minus" size="18px" />
          </div>
          <div class="quantity">{{ quantity }}</div>
          <div class="plus" @click="plus">
            <van-icon name="plus" size="18px" />
          </div>
        </div>
      </div>
      <div class="ga-bottom">
        <button class="buyNow" @click="buyNow">立即购买</button>
        <button class="addToCart" @click="addShopBag">加入购物袋</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Detail",
  data() {
    return {
      pid: "",
      quantity: 1,
      shopbagQuantity: '',
      commodityDetail: {},
      explain: [],
      collection: false,
      collectionIcon: {
        Icon: "like-o",
        acitveIcon: "like",
      },
    };
  },
  created() {
    this.pid = this.$route.params.pid;
    this.getCommodity(this.pid);
    this.getShopbagQuantity()
  },
  beforeUpdate() {
    this.getExplain();
  },
  methods: {
    getCommodity(pid) {
      this.axios({
        method: "get",
        url: "/productDetail",
        params: {
          pid,
        },
      }).then((result) => {
        let res = result.data.result[0];

        res.desc = res.desc.split("\n");

        let resData = [];

        let Specifications = ["tem", "sugar", "cream", "milk"];
        Specifications.forEach((s1) => {
          if (res[s1] == "") {
            return;
          }

          let spitem = {
            title: res[`${s1}_desc`],
            activeIndex: 0,
            subSp: [],
          };
          let sp = res[s1].split("/");
          sp.forEach((s2) => {
            spitem.subSp.push({ title: s2 });
          });
          resData.push(spitem);
        });
        res.resData = resData;

        this.commodityDetail = res;
      });
    },
    getExplain() {
      this.explain = []
      this.commodityDetail.resData.forEach((item) => {
        this.explain.push(item.subSp[item.activeIndex].title);
      });
    },
    back() {
      this.$router.go(-1);
    },
    choice(e1, i2) {
      if (e1.activeIndex == i2) {
        return;
      }
      this.explain = [];
      e1.activeIndex = i2;
    },
    modifyState() {
      let url = this.collection ? "/notlike" : "/like";

      this.axios({
        method: "post",
        url,
        data: {
          pid: this.pid,
        },
      }).then((result) => {

        if (result.data.code == 700) {
          this.$dialog
            .confirm({
              title: "您尚未登录",
              message: "立即前往登录",
            })
            .then(() => {
              return this.$router.push({ name: "Login" });
            })
            .catch(() => {});
        } else if (result.data.code == 800) {
          this.collection = true;
          this.$toast({
            message: "已收藏",
            icon: "like",
          });
        }else if(result.data.code == 900){
          this.collection = false;
          this.$toast({
            message: "已取消收藏",
            icon: "like-o",
          });
        }
      });
    },
    reduce() {
      if (this.quantity == 1) {
        return;
      }
      this.quantity--;
    },
    plus() {
      this.quantity++;
    },
    getShopbagQuantity(){
      this.axios({
        method:'get',
        url:'/shopcartCount'
      }).then(result=>{

        if(result.data.code == 4000){
          this.shopbagQuantity = result.data.result
        }
      })
    },
    addShopBag() {
      this.axios({
        method:'post',
        url:'/addShopcart',
        data:{
          pid:this.pid,
          count:this.quantity,
          rule:this.explain.join(',')
        }
      }).then(result=>{

        if(result.data.code == 3000){
          this.$toast.success("成功加入购物车");
          this.shopbagQuantity = Number(this.shopbagQuantity) + this.quantity

        }else if(result.data.code == 700){
          this.$dialog
            .confirm({
              title: "您尚未登录",
              message: "立即前往登录",
            })
            .then(() => {
              return this.$router.push({ name: "Login" });
            })
            .catch(() => {});
        }
      })
    },
    buyNow(){
      this.axios({
        method:'post',
        url:'/addShopcart',
        data:{
          pid:this.pid,
          count:this.quantity,
          rule:this.explain.join(',')
        }
      }).then(result=>{

        if(result.data.code == 3000){
          this.shopbagQuantity = Number(this.shopbagQuantity) + this.quantity
          let sids = []
          sids.push(result.data.sid)
          this.$router.push({name:'PlaceOrder',query:{sids:sids.join('-')}})
        }else if(result.data.code == 700){
          this.$dialog
            .confirm({
              title: "您尚未登录",
              message: "立即前往登录",
            })
            .then(() => {
              return this.$router.push({ name: "Login" });
            })
            .catch(() => {});
        }
      })
    }
  },
};
</script>

<style lang="less" scoped>
.detail {
  width: 100%;
  position: relative;
  .van-nav-bar--fixed{
    padding-top: 30px;
    background-color: #0022ab;
  }
  /deep/.van-nav-bar__title{
    color: #fff;
  }
  /deep/.van-icon{
    color: #fff;
  }
  /deep/.van-nav-bar__text{
    color: #fff;
  }
  /deep/.van-icon-minus{
    color: #0022ab;
  }
  .content {
    position: fixed;
    top: 76px;
    bottom: 111px;
    left: 0;
    right: 0;   
    overflow-y: auto;
    background: #fff;
    img {
      width: 100%;
    }
    .info {
      width: 100%;
      background-color: #fff;
      padding: 10px;
      position: relative;
      .name {
        font-size: 20px;
      }
      .enname {
        font-size: 15px;
        color: #888;
        margin-bottom: 20px;
      }
      .collection {
        width: 50px;
        height: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        right: 30px;
        top: -25px;
      }
      .practice {
        display: flex;
        align-items: center;
        font-size: 16px;
        margin: 20px 0;
        .p-title {
          margin-right: 5px;
        }
        .p-item {
          font-size: 14px;
          color: #555;
          width: 70px;
          padding: 5px 0;
          text-align: center;
          border-radius: 5px;
          margin: 0 5px;
          &.active {
            background-color: #e0ecf8;
            color: #0022ab;
          }
        }
      }
      .desc {
        .d-title {
          font-size: 16px;
          margin-bottom: 5px;
        }
        .d-text {
          margin: 4px 0;
          font-size: 14px;
        }
      }
    }
  }
  .goods-action {
    width: 100%;
    background-color: #fff;
    padding: 10px 15px;
    position: fixed;
    bottom: 0;
    .ga-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 10px;
      .ga-top-left {
        .price {
          font-size: 20px;
          color: #df7401;
          font-weight: 600;
        }
      }
      .ga-top-right {
        display: flex;
        align-items: center;
        .reduce,
        .plus {
          width: 22px;
          height: 22px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
        }
        .reduce {
          border: 1px solid #0022ab;
          color: #0022ab;
        }
        .plus {
          background-color: #0022ab;
          color: #fff;
        }
        .quantity {
          font-size: 16px;
          margin: 0 10px;
        }
      }
    }
    .ga-bottom {
      width: 100%;
      display: flex;
      justify-content: space-between;
      button {
        width: 165px;
        padding: 10px 0;
        border-radius: 20px;
        font-size: 15px;
      }
      .buyNow {
        border: 1px solid #b18904;
        background-color: #fff;
        color: #b18904;
      }
      .addToCart {
        border-style: none;
        background-color: #0022ab;
        color: #fff;
      }
    }
  }
}
</style>